var wo=document.querySelector(".wo")
var jian=document.querySelector(".jian")
// var fu=document.querySelector(".fu")
var bo=document.querySelector(".bo")
var xi=document.querySelector(".xi")
var asd=document.querySelector("#asd")
var le=document.querySelector(".left")
var ri=document.querySelector(".right")
var yi=document.querySelector(".yin")
var pp=document.querySelectorAll(".r-main p")
function dian () {
    le.style.marginLeft= "-50%";
    ri.style.width="25%"
    yi.style.marginRight= "0%";
}
function ji () {
    le.style.marginLeft= "0%";
    ri.style.width="50%"
    yi.style.marginRight= "-75%";
}
function as() {

    le.style.marginLeft= "-50%";
    ri.style.width="25%"
    yi.style.marginRight= "0%";

    jii.style.display="block"
    woo.style.display="none"
    boo.style.display="none"
    xii.style.display="none"

    for (var q=0;q<pp.length;q++){
        pp[q].classList.remove("ho")
    }
    pp[2].classList.add("ho")
}

function zx() {

    le.style.marginLeft= "-50%";
    ri.style.width="25%"
    yi.style.marginRight= "0%";

    xii.style.display="block"
    woo.style.display="none"
    boo.style.display="none"
    jii.style.display="none"

    for (var v=0;v<pp.length;v++){
        pp[v].classList.remove("ho")
    }
    pp[4].classList.add("ho")
}
var jii=document.querySelector(".jii")
var woo=document.querySelector(".woo")
// var fuu=document.querySelector(".fuu")
var boo=document.querySelector(".boo")
var xii=document.querySelector(".xii")

wo.addEventListener('click',function () {
    woo.style.display="block"
    jii.style.display="none"
    boo.style.display="none"
    xii.style.display="none"
})
jian.addEventListener('click',function () {

    jii.style.display="block"
    woo.style.display="none"
    boo.style.display="none"
    xii.style.display="none"
})
// fu.addEventListener('click',function () {
//
//     fuu.style.opacity="1"
//     jii.style.opacity="0"
//     woo.style.opacity="0"
//     boo.style.opacity="0"
//     xii.style.opacity="0"
// })
bo.addEventListener('click',function () {

    // fuu.style.opacity="0"
    boo.style.display="block"
    woo.style.display="none"
    jii.style.display="none"
    xii.style.display="none"
})
xi.addEventListener('click',function () {

    // fuu.style.opacity="0"
    xii.style.display="block"
    woo.style.display="none"
    boo.style.display="none"
    jii.style.display="none"
})
// asd.addEventListener('click',function () {
//a
//     jii.style.opacity="1"
//     woo.style.opacity="0"
//     fuu.style.opacity="0"
// })

for (var i=0;i<pp.length;i++){
    pp[i].addEventListener('click',function () {
        for (var j=0;j<pp.length;j++){
            pp[j].classList.remove("ho")
        }
        this.classList.add("ho")
    })
}

var qwer=document.querySelector(".fr")
var sp1=document.querySelector(".sp1")
var sp2=document.querySelector(".sp2")
var sp3=document.querySelector(".sp3")

var x=0;
qwer.addEventListener("click",function () {
    x++;

    if(x==2){
        x=0
    }
    for (var c=0;c<2;c++){

        if(x==1){
            ri.style.right="0"
            sp1.classList.add("sp11")
            sp2.classList.add("sp22")
            sp3.classList.add("sp33")
        }else {
            ri.style.right="-300px"
            sp1.classList.remove("sp11")
            sp2.classList.remove("sp22")
            sp3.classList.remove("sp33")
            x=0
            console.log(x)
        }
    }
})

